<template>
  <div class="container">
    <canvas ref="canvas"></canvas>
    <t-dialog v-show="visible" enter-text="返回选择" @enter="$router.replace('/home')">天啦噜，你的网络罢工了，请检查网</t-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      index: 0,
      visible: false
    }
  },
  computed: {
    ...mapGetters([
      'result', 'randomBg', 'randomProfessionName', 'randomProfessionDesc', 'randomSchoolName'
    ])
  },

  components: {
    't-dialog': require('../components/Dialog.vue').default
  },

  created () {
    this.index = this.$route.query.index
    if (!this.result[this.index]) return this.$router.replace('/home')
  },

  mounted () {
    const bg = new Image()
    bg.src = require('../assets/image/share.png')
    const qrcode = new Image()
    qrcode.src = require('../assets/image/qrcode.png')
    const person = new Image()
    person.src = this.result[this.index]
    const randomBg = new Image()
    randomBg.src = this.randomBg
    // 等待四张图片都加载好后开始作图
    Promise.all([bg, qrcode, person, randomBg].map(i => new Promise(resolve => { i.onload = resolve }))).then(
      () => this.draw({ bg, qrcode, person, randomBg })
    ).catch(
      () => { this.visible = true }
    )
  },

  methods: {
    // 文字根据宽度换行
    drawText (context, t, x, y, w) {
      const chr = t.split('')
      let temp = ''
      const row = []
      for (let a = 0; a < chr.length; a++) {
        if (context.measureText(temp).width >= w) {
          row.push(temp)
          temp = ''
        }
        temp += chr[a]
      }
      row.push(temp)
      for (let b = 0; b < row.length; b++) {
        context.fillText(row[b], x, y + (b + 1) * 40)
      }
    },
    // 开始作图
    draw ({ bg, qrcode, randomBg, person }) {
      const canvas = this.$refs.canvas
      // 初始化canvas
      canvas.width = 750
      canvas.height = 1489
      const context = canvas.getContext('2d')
      // 主体背景绘制
      context.drawImage(bg, 0, 0, 750, 1489)
      // 学校背景绘制
      context.drawImage(randomBg, 27, 26, 696, 960)
      // 二维码绘制
      context.drawImage(qrcode, 580, 1176, 144, 144)
      // 绘制文字背景
      // context.rect(27, 945, 696, 232)
      // context.fillStyle = 'rgba(166, 151, 174, .7)'
      // context.fill()
      // 绘制人物
      context.drawImage(person, 470, 620, 240, 540)
      // 绘制文字标题
      context.font = '400 40px 微软雅黑'
      context.fillStyle = '#ffffff'
      context.fillText(this.randomSchoolName, 40, 1045, 2000)
      const schoolNameWidth = context.measureText(this.randomSchoolName)
      context.font = '400 36px 微软雅黑'
      context.fillStyle = '#ffffff'
      context.fillText(this.randomProfessionName, schoolNameWidth.width + 60, 1045, 2000)
      context.font = '200 28px 微软雅黑'
      // 绘制文字内容
      this.drawText(context, this.randomProfessionDesc, 50, 1055, 470)
      this.getBase64()
    },
    // 获取图片base64编码
    getBase64 () {}
  }
}
</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

canvas {
  position: absolute;
  width: 750px;
  min-height: 1489px;
}
</style>
